<template>
	<view class="carview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="车主认证"></hx-navbar>
		</view>

		<view class="row-box" v-if="show">
			<view class="row-item">
				<text class="tit">车辆类型:</text>
				<picker class="flex" mode="selector" :value="typeIndex" :range="type" @change="typeChange">
					<view class="flex-sub">{{type[typeIndex]}}
						<u-icon size="14" name="arrow-right"></u-icon>
					</view>
				</picker>
				<!-- <input class="input" type="text" v-model="type" placeholder="请输入车辆类型" /> -->
			</view>
			<view class="row-item">
				<text class="tit">车辆规格:</text>
				<picker class="flex" mode="selector" :value="specsIndex" :range="specs" @change="specsChange">
					<view class="flex-sub">{{specs[specsIndex]}}
						<u-icon size="14" name="arrow-right"></u-icon>
					</view>
				</picker>
				<!-- <input class="input" type="text" v-model="size" placeholder="请输入车辆规格" /> -->
			</view>
			<view class="row-item">
				<text class="tit">载重/吨:</text>
				<input class="input" type="number" v-model="load" placeholder="请输入载重" />
			</view>
			<view class="row-item">
				<text class="tit">体积/方:</text>
				<input class="input" type="number" v-model="volume" placeholder="请输入方数" />
			</view>
			<view class="row-item">
				<text class="tit">车厢尺寸:</text>
				<view class="row-input">
					<input class="input" type="number" v-model="size[0]" placeholder="长" />*
					<input class="input" type="number" v-model="size[1]" placeholder="宽" />*
					<input class="input" type="number" v-model="size[2]" placeholder="高" />
				</view>
			</view>

			<view class="row-item">
				<view class="red small">
					温馨提示：拍照时必须正面，请勿倾斜或倒转
				</view>
			</view>
			<view class="row-item">
				<text class="tit">本人照片:</text>
				<uni-upimg @change="getImageInfo1" :upimg_preview="serviceArr1" :upload_count="2"></uni-upimg>
			</view>
			<view class="row-item">
				<text class="tit">车辆照片:</text>
				<uni-upimg @change="getImageInfo2" :upimg_preview="serviceArr2" :upload_count="2"></uni-upimg>
			</view>
			<view class="row-item">
				<text class="tit">驾驶证:</text>
				<uni-upimg @change="getImageInfo3" :upimg_preview="serviceArr3" :upload_count="2"></uni-upimg>
			</view>
			<view class="row-item">
				<text class="tit">行驶证:</text>
				<uni-upimg @change="getImageInfo4" :upimg_preview="serviceArr4" :upload_count="2"></uni-upimg>
			</view>
		</view>
		<view class="row-box" v-else>
			<view class="row-item" v-if="userInfo.verify == '1'">
				<text class="tit">车主认证:</text>
				<text class="tiv">待审核</text>
			</view>
			<view class="row-item" v-if="userInfo.verify == '2'">
				<text class="tit">车主认证:</text>
				<text class="tiv">已认证</text>
			</view>
			<view class="row-item" v-if="userInfo.verify == '3'">
				<text class="tit">车主认证:</text>
				<text class="tiv">未通过</text>
			</view>
		</view>
		<view class="fiexd-btm">
			<u-button class="custom-style" type="primary" @tap="confirm">
				<block v-if="!userInfo.verify">立即认证</block>
				<block v-else>立即修改</block>
			</u-button>
		</view>
	</view>
</template>

<script>
	import uniUpimg from '@/components//uni-upimg/uni-upimg.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: true,
				source: '',
				type: [],
				specs: [],
				typeIndex: 0,
				specsIndex: 0,
				load: '',
				volume: '',
				size: [null, null, null],
				serviceArr1: [],
				serviceArr2: [],
				serviceArr3: [],
				serviceArr4: []
			}
		},
		onLoad(option) {
			this.source = option.source
			if (this.userInfo.verify) {
				this.show = false
			}
			this.loadData()
			this.fromData()
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			uniUpimg
		},
		methods: {
			loadData() {
				this.$api.request('POST', '/api/user/selectUserInfo').then(res => {
					this.userInfo.verify = res.data.userCarOwnerVerify
					this.$store.commit('login', this.userInfo)
				})
			},
			fromData() {
				this.$api.request('POST', '/api/car/selectCartypeName').then(res => {
					res.data.forEach(item => {
						this.type.push(item.name)
					})
				})
				this.$api.request('POST', '/api/car/selectCarSpecifications').then(res => {
					res.data.forEach(item => {
						this.specs.push(item.name)
					})
				})
			},
			typeChange(e) {
				this.typeIndex = e.detail.value
			},
			specsChange(e) {
				this.specsIndex = e.detail.value
			},
			getImageInfo1(e) {
				this.serviceArr1 = e
			},
			getImageInfo2(e) {
				this.serviceArr2 = e
			},
			getImageInfo3(e) {
				this.serviceArr3 = e
			},
			getImageInfo4(e) {
				this.serviceArr4 = e
			},

			//提交
			confirm() {
				if (this.userInfo.verify && !this.show) {
					this.show = true
					return
				}
				if (!this.load) {
					this.$api.msg('请输入载重')
					return
				}
				if (!this.volume) {
					this.$api.msg('请输入体积')
					return
				}
				if (!(this.size[0] && this.size[1] && this.size[2])) {
					this.$api.msg('请输入车厢尺寸')
					return
				}
				if (!this.serviceArr1[0]) {
					this.$api.msg('请上传本人照片')
					return
				}
				if (!this.serviceArr2[0]) {
					this.$api.msg('请上传车辆照片')
					return
				}
				if (!this.serviceArr3[0]) {
					this.$api.msg('请上传驾驶证照片')
					return
				}
				if (!this.serviceArr4[0]) {
					this.$api.msg('请上传行驶证照片')
					return
				}
				let data = {
					carType: this.typeIndex + 1,
					carSpecifications: this.specsIndex + 1,
					carLoad: this.load,
					volume: this.volume,
					Length: this.size[0],
					width: this.size[1],
					height: this.size[2],
					pictures: this.serviceArr1.join(',') + this.serviceArr2.join(',') + this.serviceArr3.join(',') + this.serviceArr4
						.join(',')
				}
				let url = '/api/car/insertCarOwnerVerify'
				if (this.userInfo.verify) {
					url = '/api/car/updateCarOwnerVerify'
				}
				this.$api.request('POST', url, data).then(res => {
					if (this.userInfo.verify) {
						this.$api.msg('修改已提交')
					} else {
						this.$api.msg('认证已提交')
					}
					this.loadData()
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/user'
						})
					}, 500)
				})
			},
		}
	}
</script>

<style lang="less">
	.carview {
		min-height: 100vh;
		background-color: #fff;
	}

	.fiexd-btm {
		position: static;
		margin: 100upx 30upx 100upx;
	}
</style>
